// 抽出可复用的逻辑
// 逻辑复用其实就是找到重复代码，再找到可变的地方 把可变的变成一个函数
// setup函数组合的永远是响应式的数据
import { ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
export function lazyData (apiFn) {
  const target = ref(null)
  // 调用方法
  // 1.stop 用来停止对目标元素的监听
  // 2.target 要监听的一个对象 dom或组件实例
  // 3.isIntersecting 布尔值 代表当前监听是否进入视口区域
  const { stop } = useIntersectionObserver(target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 控制true来判断是否发起ajax请求
      if (isIntersecting) {
        apiFn()
        // 第一次请求成功后停止监听
        stop()
      }
    },
    {
      // 用来控制目标target进入视口区域的比例
      // 0-1，数值越大要求进入视口区域面积越大，才会触发回调
      // 0-1，数值越小要求进入视口区域面积越小，才会触发回调
      threshold: 0
    }
  )
  return {
    target
  }
}
// 每隔一秒钟 对counttime减一 定时器 在定时器回调中写减逻辑
export function useCountDown (time) {
  const countTime = ref(0)
  // resume 代表可执行函数 只要执行函数 里面的逻辑每隔1秒执行一次
  // pause：可执行函数 只要执行函数 里面逻辑会立刻暂停
  const { resume, pause } = useIntervalFn(() => {
    if (countTime.value === 0) {
      pause()
    } else {
      countTime.value--
    }
  }, 1000)
  function start () {
    // 开始倒计时
    countTime.value = time
    resume()
  }
  return {
    countTime,
    start,
    pause
  }
}
